<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div.ex1 {direction:rtl;}
			div {

				margin-top: 5px;
				border-color: antiquewhite;
				/* 	margin: 10px;
					/* 对象之间的距离 */
				*/
			}
		</style>

	</head>
	<body>
		<div style="height: 50px; background-color: red;">
			logo位
		</div>
		<div style="height: 20px; background-color: brown;"> 导航栏目
		</div>
		<div style="height: 200px;">
			<div style="height: 200px; width: 32%; background-color: white; border-style: solid;border-color: red;float: left;">
				<div style="height: 20px; width: 50%;background-color: red;float: left;margin-top: 0px;">栏目一</div>
				<div class="ex1"  style="height: 20px; width: 50%;background-color: red;float: right;margin-top: 0px;">...更多</div>
			</div>
			<div style="height: 200px; width: 32%; background-color: white; border-style: solid;border-color: orange;float: left; margin-left: 5px;">
				<div style="height: 20px; width: 50%;background-color: orange;float: left;margin-top: 0px;">栏目二</div>
				<div class="ex1"  style="height: 20px; width: 50%;background-color:orange;float: right;margin-top: 0px;">...更多</div>
			</div>
			<div style="height: 200px; width: 33%; background-color: white; border-style: solid;border-color: red;float: left; margin-left: 5px;">
				<div style="height: 20px; width: 50%;background-color: red;float: left;margin-top: 0px;">栏目三</div>
				<div class="ex1"  style="height: 20px; width: 50%;background-color:red;float: right;margin-top: 0px;">...更多</div>
			</div>
		</div>
		<div style="clear: both;"></div>
		<div style="height: 200px;">
			<div style="height: 200px; width: 49%; background-color: white; border-style: solid;border-color: orange;float: left;">
				<div style="height: 20px; width: 50%;background-color: orange;float: left;margin-top: 0px;">栏目一</div>
				<div class="ex1"  style="height: 20px; width: 50%;background-color: orange;float: right;margin-top: 0px;">...更多</div>
			</div>
			<div style="height: 200px; width: 49%; background-color: white; border-style: solid;border-color: orange;float: left; margin-left: 5px;">
				<div style="height: 20px; width: 50%;background-color: orange;float: left;margin-top: 0px;">栏目二</div>
				<div class="ex1"  style="height: 20px; width: 50%;background-color:orange;float: right;margin-top: 0px;">...更多</div>
			</div>
			</div>
				<div style="clear: both;"></div>
				<div style="height: 100px; background-color: brown;margin-top: 10px;">底部内容</div>
	</body>
</html>
